<template>
  <div class="container">
    <div class="top">
      <el-card>
        <!-- 查询条件 -->
        <el-form ref="queryFormRef" :model="queryForm" label-width="100px">
          <el-row :gutter="10" style="width:60vw">
            <el-col :span="12">
              <el-form-item label="评价得分：" prop="org">
                <el-select v-model="queryForm.org" clearable>
                  <el-option label="70分以下" value="1"></el-option>
                  <el-option label="70分到80分" value="2"></el-option>
                  <el-option label="80分到90分" value="3"></el-option>
                  <el-option label="90分及以上" value="4"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="组织架构：" prop="org">
                <el-select v-model="queryForm.org" clearable>
                  <el-option v-for="dict in dict.orgList"
                             :key="dict.orgid"
                             :label="dict.orgname"
                             :value="dict.orgid">
                  </el-option>
                </el-select>
              </el-form-item> -->
            </el-col>
            <el-col :span="12">
              <el-form-item label="应用系统：" prop="appsystem">
                <!-- <el-select v-model="queryForm.appsystem" clearable>
                  <el-option v-for="dict in dict.appsystemList"
                             :key="dict.sysid"
                             :label="dict.sysname"
                             :value="dict.sysid">
                  </el-option>
                </el-select> -->
                <el-input
                  placeholder="请输入应用系统名称"
                  v-model="queryForm.appsystem"
                  clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
              <el-form-item label="数据库：" prop="database">
                <el-select v-model="queryForm.database" clearable>
                  <el-option v-for="dict in dict.databaseList"
                             :key="dict.databaseid"
                             :label="dict.databasename"
                             :value="dict.databaseid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <!--  <el-col :span="4">
                <el-form-item label="实例：" prop="example">
                  <el-select v-model="queryForm.example" clearable>
                    <el-option v-for="dict in dict.exampleList"
                               :key="dict.exampleid"
                               :label="dict.examplename"
                               :value="dict.exampleid">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>-->
            <!-- <el-col :span="4">
              <el-form-item label="关注列表：" prop="follow">
                <el-select v-model="queryForm.follow" clearable>
                  <el-option v-for="dict in dict.followList"
                             :key="dict.followid"
                             :label="dict.followname"
                             :value="dict.followid">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-form-item label="告警级别：" prop="warningLevel">
                <el-checkbox-group v-model="queryForm.warningLevel">
                  <el-checkbox label=1>严重</el-checkbox>
                  <el-checkbox label="2">错误</el-checkbox>
                  <el-checkbox label="3">警告</el-checkbox>
                  <el-checkbox label="4">信息</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
                <el-form-item label="时间：" prop="time">
                    <el-radio-group v-model="queryForm.time">
                        <el-radio :label="1">日</el-radio>
                        <el-radio :label="2">周</el-radio>
                        <el-radio :label="3">年</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col> -->
            <el-col :span="2">
              <el-form-item>
                <el-button @click="resetForm" type="primary" plain>重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="middle">
      <el-row>

        <el-col :span="24" v-if="!routeType.rt1">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 告警分布</div>
            <div class="echarts" id="echart0"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt2">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 告警等级</div>
            <div class="echarts" id="echart1"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt3">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 日志Top5</div>
            <div class="echarts" id="echart2"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt4">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 运维经验Top5</div>
            <div class="echarts" id="echart3"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt5">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 健康分</div>
            <div class="echarts" id="echart4"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt6">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 性能分</div>
            <div class="echarts" id="echart5"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt7">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 负载分</div>
            <div class="echarts" id="echart6"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt8">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 日检分析</div>
            <div class="echarts" id="echart7"></div>
          </el-card>
        </el-col>

        <el-col :span="24" v-if="!routeType.rt9">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 基线分析</div>
            <div class="echarts" id="echart8"></div>
          </el-card>
        </el-col>


      </el-row>

      <el-row :gutter="15">
        <el-col :span="6" v-if="routeType.rt1">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 告警分布</div>
            <div class="echarts" id="echart0"></div>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="routeType.rt2">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 告警等级</div>
            <div class="echarts" id="echart1"></div>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="routeType.rt3">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 日志Top5</div>
            <div class="echarts" id="echart2"></div>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="routeType.rt4">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 运维经验Top5</div>
            <div class="echarts" id="echart3"></div>
          </el-card>
        </el-col>

        <el-col :span="6" v-if="routeType.rt5">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 健康分</div>
            <div class="echarts" id="echart4"></div>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="routeType.rt6">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 性能分</div>
            <div class="echarts" id="echart5"></div>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="routeType.rt7">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 负载分</div>
            <div class="echarts" id="echart6"></div>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="routeType.rt8">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 日检分析</div>
            <div class="echarts" id="echart7"></div>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="routeType.rt9">
          <el-card :body-style="{ padding: '0px' }" style="margin-top:10px; margin-left:8px">
            <div class="title">● 基线分析</div>
            <div class="echarts" id="echart8"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
window._interceptConfig = {
  collection: true, //整体开关
  click: true, //页面点击事件信息采集开关
  page: true, //页面跳转加载事件信息采集开关
  error: true, //异常信息采集开关
  http: true, //通讯信息采集开关
  name: "jyzdhywxxxtsdfx_n_prd.mart-ui-ds", //系统编号，被采集信息的系统名称。前端简称
  url: " http://apm.sd.sgcc.com.cn:19411/api/v2/spansWeb"//数据上报服务地址，根据实际情况输入
};
</script>
<!-- src -->
<script src=" http://25.41.37.249:19411/assets/js/intercept.min.js " async></script>
<script>
import {queryOrgs, queryAppSystems, queryDataBases, queryExamples, queryFollows} from "@/api/system/generic"
import {queryEcharts} from "@/api/system/analysisview"

export default {
  name: "AnalyLeft",
  props: ['tbId', 'routeTypeParent'],
  data() {
    return {

      //查询条件
      pageNumber: 1,
      pageSize: 8,
      total: 0,
      queryForm: {
        /* 查询条件 */
        org: "",
        appsystem: "",
        database: "",
        example: "",
        follow: "",
        warningLevel: [],
        time: "",
        tbId: this.tbId,
      },
      dict: { //字典
        orgList: [],
        appsystemList: [],
        databaseList: [],
        exampleList: [],
        followList: []
      },
      routeType: {
        rt1: true,
        rt2: true,
        rt3: true,
        rt4: true,
        rt5: true,
        rt6: true,
        rt7: true,
        rt8: true,
        rt9: true,
      },
      // echarts数据
      echartsData: null

    };
  },
  created() {
    this.getEChartsType()
  },
  methods: {
    getEChartsType() {
      this.routeTypeParent?this.routeType[this.routeTypeParent] = false:''
    },
    // 初始化字典
    initDict() {
      // 查询组织架构
      queryOrgs().then(response => {
        this.dict.orgList = response.data
      })
      // 查询应用系统
      queryAppSystems().then(response => {
        this.dict.appsystemList = response.data
      })
      // 查询数据库
      queryDataBases().then(response => {
        this.dict.databaseList = response.data
      })
      // 查询实例
      queryExamples().then(response => {
        this.dict.exampleList = response.data
      })
      // 查询关注列表
      queryFollows().then(response => {
        this.dict.followList = response.data
      })
    },
    // 加载数据
    initData() {
      queryEcharts(this.queryForm).then(response => {
        this.echartsData = response.data
        // 加载echarts
        this.initEcharts();
      })
    },
    // 加载echarts
    initEcharts() {
      // echart对象
      let echartsArr = []
      for (let i = 0; i < 3; i++) {
        let x = []
        let y = []
        if (i === 0) {
          x = this.echartsData['echart' + i].map(a => a["analy_source"])
        } else if (i === 1) {
          let temp = this.echartsData['echart' + i].map(a => a["analy_level"])

          for (let item in temp) {
            let i = temp[item]

            if (i === '1') {

              x.push('严重')
            } else if (i === '2') {

              x.push('错误')
            } else if (i === '3') {

              x.push('警告')
            } else if (i === '4') {

              x.push('信息')
            }


          }
        } else if (i === 2) {
          x = this.echartsData['echart' + i].map(a => a["obj_name"]).slice(0, 5)
          y = this.echartsData['echart' + i].map(a => a["ct"]).slice(0, 5)
        } else {
          x = this.echartsData['echart' + i].map(a => a["catalog"]).slice(0, 5)
          y = this.echartsData['echart' + i].map(a => a["ct"]).slice(0, 5)
        }

        if (y.length === 0) {
          y = this.echartsData['echart' + i].map(a => a["ct"])
        }

        echartsArr[i] = this.$echarts.init(document.querySelector('#echart' + i))
        echartsArr[i].setOption({
          /* 横轴 */
          xAxis: {
            type: 'category',
            data: x,
            axisLabel: {
              show: true, // 是否显示刻度标签，默认显示
              interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
              rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
              inside: false, // 刻度标签是否朝内，默认朝外
              margin: 6, // 刻度标签与轴线之间的距离
            },
          },
          yAxis: {
            /* 纵轴为数据 */
            type: 'value'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line',
            }
          },
          toolbox: {
            show: true,
            // orient: 'vertical',
            // left: 'right',
            // top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          /* 数据系列 */
          series: [{
            data: y,
            /* 折线图 */
            type: 'bar',
          }]
        })
      }
      // 暂时写死的Echarts
      this.$echarts.init(document.querySelector('#echart3')).setOption({
        xAxis: {
          type: 'category',
          data:  this.echartsData['echarts3'].map(a=>a.x).slice(0,5),
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          }
        },
        toolbox: {
            show: true,
            // orient: 'vertical',
            // left: 'right',
            // top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
        
        series: [{
          data:  this.echartsData['echarts3'].map(a=>a.y).slice(0,5),
          type: 'bar',
        }]
      })
      this.$echarts.init(document.querySelector('#echart4')).setOption({
        xAxis: {
          type: 'category',
          data:  this.echartsData['echarts4'].map(a=>a.x),
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          }
        },
        toolbox: {
            show: true,
            // orient: 'vertical',
            // left: 'right',
            // top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
        series: [{
          data:  this.echartsData['echarts4'].map(a=>a.y),
          type: 'bar',
        }]
      })
      this.$echarts.init(document.querySelector('#echart5')).setOption({
        xAxis: {
          type: 'category',
          data: this.echartsData['echarts5'].map(a=>a.x),
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          }
        },
        toolbox: {
            show: true,
            // orient: 'vertical',
            // left: 'right',
            // top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
        series: [{
          data: this.echartsData['echarts5'].map(a=>a.y),
          type: 'bar',
        }]
      })
      this.$echarts.init(document.querySelector('#echart6')).setOption({
        xAxis: {
          type: 'category',
          data: this.echartsData['echarts6'].map(a=>a.x),
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          }
        },
        toolbox: {
            show: true,
            // orient: 'vertical',
            // left: 'right',
            // top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
        series: [{
          data:  this.echartsData['echarts6'].map(a=>a.y),
          type: 'bar',
        }]
      })
      this.$echarts.init(document.querySelector('#echart7')).setOption({
        xAxis: {
          type: 'category',
          data:  this.echartsData['echarts7'].map(a=>a.x),
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          }
        },
        toolbox: {
            show: true,
            // orient: 'vertical',
            // left: 'right',
            // top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
        series: [{
          data:  this.echartsData['echarts7'].map(a=>a.y),
          type: 'bar',
        }]
      })
      this.$echarts.init(document.querySelector('#echart8')).setOption({
        xAxis: {
          type: 'category',
          data:  this.echartsData['echarts8'].map(a=>a.x),
          axisLabel: {
            show: true, // 是否显示刻度标签，默认显示
            interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效；默认会采用标签不重叠的策略间隔显示标签；可以设置成0强制显示所有标签；如果设置为1，表示『隔一个标签显示一个标签』，如果值为2，表示隔两个标签显示一个标签，以此类推。
            rotate: -60, // 刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠；旋转的角度从-90度到90度
            inside: false, // 刻度标签是否朝内，默认朝外
            margin: 6, // 刻度标签与轴线之间的距离
          },
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
          }
        },
        toolbox: {
            show: true,
            // orient: 'vertical',
            // left: 'right',
            // top: 'center',
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar', 'stack'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
        series: [{
          data:  this.echartsData['echarts8'].map(a=>a.y),
          type: 'bar',
        }]
      })

    },
    // 重置表单
    resetForm() {
      this.$refs.queryFormRef.resetFields()
    }
  },
  mounted() {
    this.initDict();
    this.initData();
  },
  watch: {
    //侦听queryForm
    queryForm: {
      deep: true,
      handler(newValue, oldValue) {
        // this.pageNumber = 1
        this.initData();
      }
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.echarts {
  height: 280px;
}

.title {
  margin: 10px;
}

.middle {
  width: 100%;
}
</style>
